<template>
  <div class="chat-input">
    <div class="input-toolbar">
      <el-tooltip content="图片" placement="top">
        <el-button type="text" class="toolbar-btn" @click="selectImage">
          <el-icon><Picture /></el-icon>
        </el-button>
      </el-tooltip>

      <el-tooltip content="文件" placement="top">
        <el-button type="text" class="toolbar-btn" @click="selectFile">
          <el-icon><Paperclip /></el-icon>
        </el-button>
      </el-tooltip>

      <el-tooltip content="语音" placement="top">
        <el-button type="text" class="toolbar-btn" @click="toggleVoice">
          <el-icon><Microphone /></el-icon>
        </el-button>
      </el-tooltip>
    </div>

    <div class="input-area">
      <el-input
        v-model="messageText"
        type="textarea"
        :rows="3"
        :maxlength="1000"
        placeholder="输入消息..."
        resize="none"
        @keydown="handleKeydown"
        ref="messageInput"
        class="message-input"
      />

      <div class="input-actions">
        <div class="input-info">
          <span class="char-count">{{ messageText.length }}/1000</span>
        </div>

        <div class="send-actions">
          <el-button
            type="primary"
            :disabled="!messageText.trim()"
            @click="sendMessage"
            class="send-btn"
          >
            发送
          </el-button>
        </div>
      </div>
    </div>


    <!-- 隐藏的文件输入 -->
    <input
      ref="fileInput"
      type="file"
      style="display: none"
      @change="handleFileSelect"
      accept="image/*,.pdf,.doc,.docx,.txt"
    />
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { ElMessage } from "element-plus";

const emit = defineEmits([
  "send-message",
  "send-image",
  "send-file",
  "send-voice",
]);

const messageText = ref("");
const showEmoji = ref(false);
const messageInput = ref(null);
const fileInput = ref(null);



const sendMessage = () => {
  if (!messageText.value.trim()) return;

  emit("send-message", {
    content: messageText.value.trim(),
    timestamp: new Date(),
    type: "text",
  });

  messageText.value = "";
  showEmoji.value = false;
};

const handleKeydown = (event) => {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    sendMessage();
  }
};

const toggleEmoji = () => {
  showEmoji.value = !showEmoji.value;
};

const insertEmoji = (emoji) => {
  messageText.value += emoji;
  nextTick(() => {
    messageInput.value.focus();
  });
};

const selectImage = () => {
  fileInput.value.click();
};

const selectFile = () => {
  fileInput.value.click();
};

const handleFileSelect = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  // 检查文件大小 (10MB)
  if (file.size > 10 * 1024 * 1024) {
    ElMessage.error("文件大小不能超过10MB");
    return;
  }

  if (file.type.startsWith("image/")) {
    emit("send-image", file);
  } else {
    emit("send-file", file);
  }

  // 清空input
  event.target.value = "";
};

const toggleVoice = () => {
  emit("send-voice", { action: "toggle" });
};
</script>

<style scoped lang="scss">
.chat-input {
  background: #fff;
  border-top: 1px solid #e5e8ef;
  padding: 16px 20px;
  position: relative;

  .input-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;

    .toolbar-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      color: #666;

      &:hover {
        background: #f5f5f5;
        color: #333;
      }
    }
  }

  .input-area {
    .message-input {
      margin-bottom: 12px;

      :deep(.el-textarea__inner) {
        border-radius: 8px;
        border: 1px solid #d9d9d9;
        font-size: 14px;
        line-height: 1.4;

        &:focus {
          border-color: #1890ff;
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
      }
    }

    .input-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .input-info {
        .char-count {
          font-size: 12px;
          color: #999;
        }
      }

      .send-actions {
        .send-btn {
          border-radius: 6px;
          padding: 8px 20px;
          font-weight: 500;
        }
      }
    }
  }

  .emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    margin-bottom: 8px;
    max-height: 200px;
    overflow-y: auto;

    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 8px;

      .emoji-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.2s;

        &:hover {
          background: #f5f5f5;
          transform: scale(1.1);
        }
      }
    }
  }
}

// 滚动条样式
.emoji-picker::-webkit-scrollbar {
  width: 6px;
}

.emoji-picker::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.emoji-picker::-webkit-scrollbar-track {
  background: #f0f0f0;
}
</style>
